<template>
  <view class="registration-page">
    <!-- 活动信息 -->
    <view class="activity-info">
      <view class="info-header">
        <text class="activity-title">{{ activityInfo.title }}</text>
        <view class="activity-type">
          <u-tag 
            :text="activityInfo.type" 
            type="primary"
            size="normal"
          ></u-tag>
        </view>
      </view>
      
      <view class="info-meta">
        <view class="meta-item">
          <u-icon name="calendar" size="14" color="#52c41a"></u-icon>
          <text class="meta-text">{{ activityInfo.startTime }}</text>
        </view>
        <view class="meta-item">
          <u-icon name="map-pin" size="14" color="#52c41a"></u-icon>
          <text class="meta-text">{{ activityInfo.location }}</text>
        </view>
        <view class="meta-item">
          <u-icon name="wallet" size="14" color="#52c41a"></u-icon>
          <text class="meta-text" :class="{ free: activityInfo.price === 0 }">
            {{ activityInfo.price === 0 ? '免费' : `¥${activityInfo.price}` }}
          </text>
        </view>
      </view>
    </view>

    <!-- 报名表单 -->
    <view class="registration-form">
      <view class="form-section">
        <view class="section-title">
          <u-icon name="user" size="16" color="#52c41a"></u-icon>
          <text class="title-text">个人信息</text>
        </view>
        
        <view class="form-content">
          <view class="form-item">
            <text class="form-label">姓名 <text class="required">*</text></text>
            <u-input 
              v-model="formData.name"
              placeholder="请输入您的姓名"
              :border="false"
              bg-color="#f8f9fa"
            ></u-input>
          </view>
          
          <view class="form-item">
            <text class="form-label">手机号 <text class="required">*</text></text>
            <u-input 
              v-model="formData.phone"
              placeholder="请输入您的手机号"
              type="number"
              :border="false"
              bg-color="#f8f9fa"
            ></u-input>
          </view>
          
          <view class="form-item">
            <text class="form-label">身份证号 <text class="required">*</text></text>
            <u-input 
              v-model="formData.idCard"
              placeholder="请输入您的身份证号"
              :border="false"
              bg-color="#f8f9fa"
            ></u-input>
          </view>
          
          <view class="form-item">
            <text class="form-label">性别 <text class="required">*</text></text>
            <view class="radio-group">
              <view 
                v-for="(item, index) in genderOptions" 
                :key="index"
                class="radio-item"
                :class="{ active: formData.gender === item.value }"
                @click="handleGenderChange(item.value)"
              >
                <text class="radio-text">{{ item.label }}</text>
              </view>
            </view>
          </view>
          
          <view class="form-item">
            <text class="form-label">年龄</text>
            <u-input 
              v-model="formData.age"
              placeholder="请输入您的年龄"
              type="number"
              :border="false"
              bg-color="#f8f9fa"
            ></u-input>
          </view>
        </view>
      </view>

      <view class="form-section">
        <view class="section-title">
          <u-icon name="info-circle" size="16" color="#52c41a"></u-icon>
          <text class="title-text">报名信息</text>
        </view>
        
        <view class="form-content">
          <view class="form-item">
            <text class="form-label">参与人数 <text class="required">*</text></text>
            <u-number-box 
              v-model="formData.participantCount"
              :min="1"
              :max="5"
              :step="1"
              bg-color="#f8f9fa"
            ></u-number-box>
          </view>
          
          <view class="form-item">
            <text class="form-label">紧急联系人</text>
            <u-input 
              v-model="formData.emergencyContact"
              placeholder="请输入紧急联系人姓名"
              :border="false"
              bg-color="#f8f9fa"
            ></u-input>
          </view>
          
          <view class="form-item">
            <text class="form-label">紧急联系电话</text>
            <u-input 
              v-model="formData.emergencyPhone"
              placeholder="请输入紧急联系电话"
              type="number"
              :border="false"
              bg-color="#f8f9fa"
            ></u-input>
          </view>
          
          <view class="form-item">
            <text class="form-label">备注信息</text>
            <u-textarea 
              v-model="formData.remark"
              placeholder="请输入备注信息（选填）"
              :maxlength="200"
              :count="true"
              :border="false"
              bg-color="#f8f9fa"
            ></u-textarea>
          </view>
        </view>
      </view>

      <view class="form-section">
        <view class="section-title">
          <u-icon name="file-text" size="16" color="#52c41a"></u-icon>
          <text class="title-text">活动须知</text>
        </view>
        
        <view class="notice-content">
          <view 
            v-for="(notice, index) in activityNotices" 
            :key="index"
            class="notice-item"
          >
            <text class="notice-text">{{ notice }}</text>
          </view>
        </view>
      </view>

      <view class="form-section">
        <view class="section-title">
          <u-icon name="check-circle" size="16" color="#52c41a"></u-icon>
          <text class="title-text">确认信息</text>
        </view>
        
        <view class="confirm-content">
          <view class="confirm-item">
            <u-checkbox 
              v-model="formData.agreeTerms"
              active-color="#52c41a"
            ></u-checkbox>
            <text class="confirm-text">我已阅读并同意<text class="link-text" @click="handleViewTerms">《活动报名协议》</text></text>
          </view>
          
          <view class="confirm-item">
            <u-checkbox 
              v-model="formData.agreePrivacy"
              active-color="#52c41a"
            ></u-checkbox>
            <text class="confirm-text">我已阅读并同意<text class="link-text" @click="handleViewPrivacy">《隐私政策》</text></text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="price-info">
        <text class="price-label">报名费用：</text>
        <text class="price-value" :class="{ free: activityInfo.price === 0 }">
          {{ activityInfo.price === 0 ? '免费' : `¥${activityInfo.price * formData.participantCount}` }}
        </text>
      </view>
      
      <view class="submit-btn" @click="handleSubmit">
        <text class="btn-text">确认报名</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

// 活动信息
const activityInfo = reactive({
  id: 1,
  title: '社区春节联欢晚会',
  type: '文艺演出',
  startTime: '2025-02-10 19:00',
  location: '社区活动中心',
  price: 0
})

// 表单数据
const formData = reactive({
  name: '',
  phone: '',
  idCard: '',
  gender: '',
  age: '',
  participantCount: 1,
  emergencyContact: '',
  emergencyPhone: '',
  remark: '',
  agreeTerms: false,
  agreePrivacy: false
})

// 性别选项
const genderOptions = reactive([
  { label: '男', value: 'male' },
  { label: '女', value: 'female' }
])

// 活动须知
const activityNotices = reactive([
  '请提前30分钟到场签到',
  '活动期间请保持安静，不要大声喧哗',
  '请携带身份证件进行身份验证',
  '活动结束后请有序离场',
  '如有疑问请联系社区工作人员'
])

// 性别选择
const handleGenderChange = (value: string) => {
  formData.gender = value
}


// 查看协议
const handleViewTerms = () => {
  uni.navigateTo({
    url: '/pages/common/terms'
  })
}

// 查看隐私政策
const handleViewPrivacy = () => {
  uni.navigateTo({
    url: '/pages/common/privacy'
  })
}

// 表单验证
const validateForm = () => {
  if (!formData.name.trim()) {
    uni.showToast({
      title: '请输入姓名',
      icon: 'none'
    })
    return false
  }
  
  if (!formData.phone.trim()) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
    return false
  }
  
  if (!/^1[3-9]\d{9}$/.test(formData.phone)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    })
    return false
  }
  
  if (!formData.idCard.trim()) {
    uni.showToast({
      title: '请输入身份证号',
      icon: 'none'
    })
    return false
  }
  
  if (!formData.gender) {
    uni.showToast({
      title: '请选择性别',
      icon: 'none'
    })
    return false
  }
  
  if (!formData.agreeTerms) {
    uni.showToast({
      title: '请同意活动报名协议',
      icon: 'none'
    })
    return false
  }
  
  if (!formData.agreePrivacy) {
    uni.showToast({
      title: '请同意隐私政策',
      icon: 'none'
    })
    return false
  }
  
  return true
}

// 提交报名
const handleSubmit = () => {
  if (!validateForm()) {
    return
  }
  
  uni.showLoading({
    title: '提交中...'
  })
  
  // 模拟提交
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '报名成功',
      icon: 'success'
    })
    
    // 跳转到报名成功页面
    setTimeout(() => {
      uni.navigateTo({
        url: `/pages/activity-registration/success?id=${activityInfo.id}`
      })
    }, 1500)
  }, 2000)
}

// 页面加载
onMounted(() => {
  console.log('活动报名页面加载完成')
})
</script>

<style lang="scss" scoped>
.registration-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}


.activity-info {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .info-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20rpx;
    
    .activity-title {
      flex: 1;
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      line-height: 1.4;
      margin-right: 20rpx;
    }
    
    .activity-type {
      flex-shrink: 0;
    }
  }
  
  .info-meta {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    
    .meta-item {
      display: flex;
      align-items: center;
      gap: 12rpx;
      
      .meta-text {
        font-size: 26rpx;
        color: #666;
        
        &.free {
          color: #52c41a;
        }
      }
    }
  }
}

.registration-form {
  .form-section {
    background-color: #fff;
    margin-bottom: 20rpx;
    
    .section-title {
      display: flex;
      align-items: center;
      gap: 12rpx;
      padding: 30rpx 30rpx 20rpx;
      border-bottom: 1rpx solid #f0f0f0;
      
      .title-text {
        font-size: 30rpx;
        font-weight: 600;
        color: #333;
      }
    }
    
    .form-content {
      padding: 30rpx;
      
      .form-item {
        margin-bottom: 30rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .form-label {
          display: block;
          font-size: 28rpx;
          color: #333;
          margin-bottom: 16rpx;
          
          .required {
            color: #ff4d4f;
          }
        }
        
        .radio-group {
          display: flex;
          gap: 20rpx;
          
          .radio-item {
            flex: 1;
            padding: 20rpx;
            border: 2rpx solid #d9d9d9;
            border-radius: 8rpx;
            text-align: center;
            transition: all 0.3s ease;
            
            &.active {
              border-color: #52c41a;
              background-color: #f6ffed;
              
              .radio-text {
                color: #52c41a;
              }
            }
            
            .radio-text {
              font-size: 28rpx;
              color: #666;
            }
          }
        }
      }
    }
    
    .notice-content {
      padding: 30rpx;
      
      .notice-item {
        display: flex;
        align-items: flex-start;
        gap: 12rpx;
        margin-bottom: 16rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .notice-text {
          flex: 1;
          font-size: 26rpx;
          color: #666;
          line-height: 1.5;
        }
      }
    }
    
    .confirm-content {
      padding: 30rpx;
      
      .confirm-item {
        display: flex;
        align-items: flex-start;
        gap: 16rpx;
        margin-bottom: 20rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .confirm-text {
          flex: 1;
          font-size: 26rpx;
          color: #666;
          line-height: 1.5;
          
          .link-text {
            color: #52c41a;
            text-decoration: underline;
          }
        }
      }
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .price-info {
    .price-label {
      font-size: 28rpx;
      color: #666;
    }
    
    .price-value {
      font-size: 32rpx;
      font-weight: 600;
      color: #ff4d4f;
      
      &.free {
        color: #52c41a;
      }
    }
  }
  
  .submit-btn {
    padding: 20rpx 60rpx;
    background-color: #52c41a;
    border-radius: 40rpx;
    transition: all 0.3s ease;
    
    &:active {
      background-color: #389e0d;
    }
    
    .btn-text {
      font-size: 28rpx;
      font-weight: 500;
      color: #fff;
    }
  }
}
</style>
